<template>
  <div class="projectList" @click="closeDelete()">
    <ul class="clearfix">
      <li  v-for="item in projectList" :key="item.projectId" >
        <img :src="item.figure" alt class="projectImg"  @click.prevent="viewProject(item.projectId)"/>
        <div
          :class="['projectStatus', item.projectCompletion === '监测中' ? 'working' : item.projectCompletion === '监测完成' ? 'finished' : 'notStart']"
        ></div>
        <div class="textContent">
          <p class="projectName" :title="item.projectName">{{ item.projectName }}</p>
          <p class="codeAndAdd clearfix">
            <span class="code">编号：{{ item.projectNumber }}</span>
            <span class="add">
              <img src="../../../assets/project/location.png" alt />
              {{ item.province === item.projectThumAd ? item.province : item.province + item.projectThumAd  }}
            </span>
          </p>
        </div>
        <div class="compony">
          <span :title="item.consUnit">{{ item.consUnit }}</span>
          <img
            src="../../../assets/project/more.png"
            ondragstart="return false"
            @click.stop="showDeletePop(item)"
          />
          <div class="delete" v-show="deleteItem === item">
            <div class="arrow"></div>
            <div class="arrowHide"></div>
            <p :class="ifSelect === '我的'?'mine':'all'" @click="jumpToPM(item.projectId)">管理项目</p>
            <p class="mine" @click.stop="sureDelete(item)" v-if="ifSelect === '我的'">删除项目</p>
          </div>
        </div>
      </li>
    </ul>
    <delete-alert-box
      v-if="isDelete"
      :isDelete=isDelete
      :descTips=descTips
      @Confirm=Confirm
      @Cancel=Cancel
      ></delete-alert-box>
  </div>
</template>
<script>
import { setProjectId } from '@/utils/projectId'
import { removeProject } from '@/api/project'
export default {
  data () {
    return {
      deleteItem: null,
      descTips: [],
      isDelete: false,
      deleteId: []
    }
  },
  computed: {
    projectList () {
      const list = this.$store.state.project.projectList
      // console.log(list)
      return list
    },
    ifSelect () {
      return this.$store.state.project.currentNav
    }
  },
  methods: {
    showDeletePop (item) {
      if (this.deleteItem === item) {
        this.deleteItem = ''
        return
      }
      this.deleteItem = item
    },
    // 删除
    sureDelete (item) {
      this.deleteItem = null
      this.descTips = [{
        tips: `确定删除“${item.projectName}”？`,
        subTips: '删除之后，相关项目信息、设备，等数据都会删除。',
        default: ''
      }]
      this.deleteId = item.projectId
      this.isDelete = true
    },
    async Confirm () {
      // console.log('确定')
      const { data: res } = await removeProject(this.deleteId)
      // console.log(res)
      if (res.code === 200) {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1000
        })
        this.$store.dispatch('project/getList')
        this.$store.dispatch('project/getCount')
        this.isDelete = false
      }
    },
    Cancel () {
      this.isDelete = false
      // console.log('取消')
    },
    // 关闭删除
    closeDelete (item) {
      this.deleteItem = {}
    },
    // 点击项目进入具体的项目
    async jumpToPM (id) {
      await setProjectId(id)
      sessionStorage.clear()
      await this.$router.push('/projectManage')
    },
    async viewProject (id) {
      sessionStorage.clear()
      await sessionStorage.setItem('projectId', id)
      await this.$router.push('/projectView')
    }
  }
}
</script>

<style scoped lang="scss">
.projectList {
  width: 100%;
  padding-bottom: 55px;
  overflow: hidden;
  ul {
    width: 100%;
    li {
      background-color: #fff;
      border-radius: 5px;
      float: left;
      width: 19%;
      height: 340px;
      margin-right: 8px;
      margin-left: 8px;
      margin-bottom: 20px;
      position: relative;
      .projectImg {
        width: 100%;
        height: 207px;
        cursor: pointer;
      }
      .projectStatus {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
      }
      .notStart {
        background-image: url("../../../assets/project/notStart.png");
        background-size: 100%;
      }
      .working {
        background-image: url("../../../assets/project/working.png");
        background-size: 100%;
      }
      .finished {
        background-image: url("../../../assets/project/finished.png");
        background-size: 100%;
      }
      .textContent {
        padding: 0 10px;
        width: 100%;
        .projectName {
          width: 100%;
          height: 44px;
          line-height: 44px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          font-weight: 500;
        }
        .codeAndAdd {
          font-size: 12px;
          .code {
            color: #666;
            float: left;
          }
          .add {
            width: 65%;
            overflow:hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
            img {
              width: 10px;
              margin-right: 4px;
            }
            color: #999;
            float: right;
          }
        }
      }
      .compony {
        position: absolute;
        bottom: 0;
        height: 50px;
        line-height: 50px;
        border-top: 1px solid #f2f2f2;
        padding-left: 10px;
        width: 100%;
        color: #999;
        font-size: 12px;
        span{
          display: inline-block;
          width: 85%;
          overflow:hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        img {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
          width: 20px;
          cursor: pointer;
          z-index: 9999;
        }
        .delete {
          width: 136px;
          // height: 52px;
          position: absolute;
          right: 0px;
          top: 38px;
          background-color: #fff;
          border: 1px solid rgba(87, 131, 255, 0.5);
          border-radius: 5px;
          box-shadow: 0px 4px 10px 0px rgba(11, 34, 89, 0.12);
          z-index: 99;
          .arrow {
            width: 0px;
            height: 0px;
            position: absolute;
            right: 13px;
            top: -10px;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 10px solid rgba(87, 131, 255, 0.5);
          }
          .arrowHide {
            width: 0px;
            height: 0px;
            position: absolute;
            right: 13px;
            top: -8px;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 10px solid #fff;
          }
          p.mine {
            text-align: center;
            height: 27px;
            line-height: 27px;
            font-size: 14px;
            color: #ff2b2b;
            cursor: pointer;
          }
          p.all{
            text-align: center;
            height: 52px;
            line-height: 52px;
            font-size: 14px;
            color: #ff2b2b;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
